import { Space, Select, Divider } from "antd";
import { UsbFilled, HarmonyOSOutlined } from "@ant-design/icons";
const options = [
    {
        label: "China",
        value: "china",
        emoji: "🇨🇳",
        desc: "China (中国)",
        icon: <UsbFilled />,
    },
    {
        label: "USA",
        value: "usa",
        emoji: "🇺🇸",
        desc: "USA (美国)",
        icon: <HarmonyOSOutlined />,
    },
];
const View = () => {
    const handleChange = (value) => {
        console.log(`selected => ${value}`);
    };
    return (
        <>
            <h2>Select选择器</h2>
            <Divider>
                <h3>基本使用</h3>
            </Divider>
            <Space wrap>
                <Select
                    style={{ width: "140px" }}
                    placeholder='Please select'
                    onChange={handleChange}
                    options={[
                        {
                            value: "A",
                            label: "Option A",
                        },
                        {
                            value: "B",
                            label: "Option B",
                        },
                        {
                            value: "C",
                            label: "Option C",
                        },
                    ]}
                />
                <Select
                    style={{ width: "140px" }}
                    placeholder='Please select'
                    onChange={handleChange}
                    options={[
                        {
                            label: <strong>管理员</strong>,
                            title: "管理员",
                            options: [
                                {
                                    value: "cowen",
                                    label: "郑浩",
                                },
                                {
                                    value: "zhangsan",
                                    label: "张三",
                                },
                            ],
                        },
                        {
                            value: "tina",
                            label: "田彦平",
                        },
                    ]}
                />
                <Select
                    mode='multiple'
                    style={{ minWidth: "140px" }}
                    placeholder='请选择角色名'
                    onChange={handleChange}
                    options={[
                        {
                            label: <strong>管理员</strong>,
                            title: "管理员",
                            options: [
                                {
                                    value: "cowen",
                                    label: "郑浩",
                                },
                                {
                                    value: "zhangsan",
                                    label: "张三",
                                },
                            ],
                        },
                        {
                            value: "tina",
                            label: "田彦平",
                        },
                    ]}
                />
            </Space>
            <Divider>
                <h3>自定义渲染</h3>
            </Divider>
            <Select
                mode='multiple'
                allowClear
                style={{ width: "100%" }}
                placeholder='自定义渲染'
                onChange={handleChange}
                optionRender={(option) => (
                    <Space>
                        {option.data.icon}
                        {option.data.desc}
                    </Space>
                )}
                options={options}
            />
        </>
    );
};
export default View;
